<script setup lang="ts">
import { computed, ref, useSlots } from 'vue';

// import { useAccess } from '@vben/access';
import { useVbenModal } from '@vben/common-ui';
// import { VbenIcon } from '@vben/icons';

import { Skeleton } from 'ant-design-vue';
import { isFunction } from 'lodash-es';

import DetailsDescriptions from './details-descriptions.vue';

const props = withDefaults(defineProps<Props>(), {
  columns: () => [],
  title: '详情',
  width: 600,
  labelWidth: 120,
});

const emit = defineEmits<{ closed: [] }>();

interface Props {
  columns?: DetailsModalSchema[];
  title?: string;
  width?: number | string;
  labelWidth?: number | string;
  /**
   * 传入获取详情的接口
   */
  api: (value: any) => PromiseLike<Record<string, any>>;
}

const info = ref<Record<string, any>>();
const modalWidthClass = computed(() => {
  return `w-[${props.width}px]`;
});

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    const record = modalApi.getData() as { [key: string]: any };
    const id = record?.id as number | string;
    const { api } = props;
    if (id && isFunction(api)) {
      info.value = await api(id);
    }
  },
  onClosed() {
    info.value = undefined;
    emit('closed');
  },
});

const slots = useSlots();
</script>

<template>
  <BasicModal
    :footer="false"
    :fullscreen-button="false"
    :class="modalWidthClass"
    :title="title"
  >
    <DetailsDescriptions
      :details="info"
      :columns="columns"
      :label-width="labelWidth"
    >
      <template
        v-for="slotName in Object.keys(slots)"
        :key="slotName"
        #[slotName]="data"
      >
        <slot :name="slotName" v-bind="data ?? {}"></slot>
      </template>
    </DetailsDescriptions>
    <Skeleton v-if="!info" active />
  </BasicModal>
</template>
